<template>
	<view class="work-container">
		<view class="one" v-for="(item,index) in box" :key="index">
			<view class="up">
				{{item.header}}
			</view>
			<view class="below">
				<view class="below-li" v-for="k in item.son" :key="k.id">
					<view class="" @click="leaveFor(k.URL)">
						<image :src="k.img" mode="" class="img"></image>
						<view class="text">
							{{k.text}}
						</view>
					</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				box: [{
					// URL是跳转去相应页面的路径
					// 后面拼接的state是点击去相应页面的展示的状态
					id: 10,
					header: '设备维修',
					son: [{
						img: '/static/images/index/daijieshou.png',
						text: '待接收',
						URL: `/pages/facilityMaintain/index/index?state=${'RECEIVING'}`
					}, {
						img: '/static/images/index/daiweixiu.png',
						text: '待维修',
						URL: `/pages/facilityMaintain/index/index?state=${'REPAIRING'}`
					}, {
						img: '/static/images/index/daiyanz.png',
						text: '待验证',
						URL: `/pages/facilityMaintain/index/index?state=${'VERIFYING'}`
					}, {
						img: '/static/images/index/baoxiu.png',
						text: '报修',
						URL: `/pages/facilityMaintain/newRepairs/index`
					}]
				}, {
					id: 9,
					header: '设备点巡查',
					son: [{
						img: '/static/images/index/daijiancha.png',
						text: '未开始',
						URL: `/pages/facilityPatrol/index/index?status=${0}`

					}, {
						img: '/static/images/index/ycq.png',
						text: '检查中',
						URL: `/pages/facilityPatrol/index/index?status=${1}`
					}, {
						img: '/static/images/index/jiancha.png',
						text: '已完成',
						URL: `/pages/facilityPatrol/index/index?status=${2}`
					}, {
						img: '/static/images/index/ycq.png',
						text: '新建检查',
						URL: `/pages/facilityPatrol/upkeep/upkeep`
					}]
				}, {
					id: 8,
					header: '设备保养',
					son: [{
						img: '/static/images/index/daibaoyang.png',
						text: '未开始',
						URL: `/pages/facilityUpkeep/idnex/idnex?status=${0}`
					}, {
						img: '/static/images/index/ycq.png',
						text: '保养中',
						URL: `/pages/facilityUpkeep/idnex/idnex?status=${1}`
					},{
						img: '/static/images/index/ycq.png', 
						text: '已完成',
						URL: `/pages/facilityUpkeep/idnex/idnex?status=${2}`
					},{
						img: '/static/images/index/ycq.png',
						text: '新建保养',
						URL: `/pages/facilityPatrol/upkeep/upkeep`
					}]
				}, ]
			}
		},
		onLoad() {

		},
		created() {},
		methods: {
			leaveFor(URL) {
				uni.navigateTo({
					url: URL
				})
			}
		}
	}
</script>

<style lang="scss">
	.one {
		height: 268rpx;
		opacity: 1;
		border-radius: 20rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 0px 20rpx rgba(32, 37, 64, 0.06);
		padding: 32rpx;
		margin-bottom: 32rpx;

		.up {
			// height: 32rpx;
			opacity: 1;
			/** 文本1 */
			font-size: 32rpx;
			font-weight: 700;
			letter-spacing: 0px;
			line-height: 38rpx;
			color: rgba(32, 37, 64, 1);
			text-align: left;
			vertical-align: top;
			margin-bottom: 36rpx;
		}

		.below {
			display: flex;

			.below-li {
				width: 25%;
				text-align: center;

				.img {
					width: 64rpx;
					height: 64rpx;
					opacity: 1;
				}

				.text {
					opacity: 1;
					/** 文本1 */
					font-size: 24rpx;
					font-weight: 400;
					letter-spacing: 0px;
					line-height: 28rpx;
					color: rgba(32, 37, 64, 1);

				}
			}
		}
	}
</style>